<template>
	<view class="contet">
		<view class="diss">
			<view v-for="(item,index) in menus" @tap="navChange(item,index)">
				<image v-if="menu_index == index" class="imgs" :src="item.img2"></image>
				<image v-else class="imgs" :src="item.img1"></image>
				<view :class="menu_index == index ? 'text1' : 'text2'">
					{{item.label}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			menu_index: {
				type: String,
				default: "0"
			}
		},
		data() {
			return {
				menus: [{
						id: 0,
						label: '首页',
						value: 'home',
						img1: '../../../../static/activity/apply/menu_imgs/home.png',
						img2: '../../../../static/activity/apply/menu_imgs/home2.png',
						url: "../index/index2"
					},
					{
						id: 1,
						label: '我的',
						img1: '../../../../static/activity/apply/menu_imgs/my.png',
						img2: '../../../../static/activity/apply/menu_imgs/my2.png',
						value: 'my',
						url: "../user/my"
					},
				],
			}
		},
		methods: {
			navChange(item, index) {
				var self = this
				console.log('item: ', item);
				console.log('index: ', index);
				this.menu = item.value;
				this.currentIndex = index
				uni.setNavigationBarTitle({
					title: item.label
				})
				uni.redirectTo({
					url: item.url
				})
			}
		}

	}
</script>
<style>
	.contet {
		width: 100vw;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		border-top: 1rpx solid #DADADA;
	}

	.diss {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.imgs {
		width: 55rpx;
		height: 55rpx;
		margin-top: 10rpx;
	}

	.text1 {
		color: red;
		font-size: 25rpx;
		text-align: center;
		margin-top: -5rpx;
	}

	.text2 {
		color: #DADADA;
		font-size: 25rpx;
		text-align: center;
		margin-top: -5rpx;
	}
</style>